<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <!-- <el-form-item label="关键字">
        <el-input v-model="listQuery.purviewName" />
      </el-form-item>-->
      <el-form-item>
        <template slot-scope="scope">
          <!-- <el-button type="primary" round @click="getList()">搜索</el-button> -->
          <el-button type="primary" round icon="el-icon-zoom-in" @click="addMenu()">添加一级菜单</el-button>
          <!-- <el-button type="primary" round @click="seeMenu(scope.row)">查看一级菜单权限</el-button> -->
        </template>
      </el-form-item>
    </el-form>

    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-table :data="onemenuList" height="600" v-loading="listLoading1" highlight-current-row>
            <el-table-column align="center" label="一级菜单">
              <template slot-scope="scope">
                <el-link :type="scope.row.linkType" @click="twomenu(scope.row)">
                  <span v-html="scope.row.label"></span>
                </el-link>
                <!-- <span @click="twomenu(scope.row)">{{scope.row.purviewName}}</span> -->
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.clickable" @click="opensee(scope.row)">查看权限</el-button>
                <el-button type="text" @click="editMenu(scope.row)">修改</el-button>
                <el-button type="text" v-if="!scope.row.clickable" @click="addMenu(scope.row)">增加下级</el-button>
                <el-button type="text" @click="menuRole(scope.row)">菜单角色</el-button>
                <el-button type="text" style="color:#f00" @click="opendel(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-table :data="twomenuList" height="600" highlight-current-row >
            <el-table-column align="center" label="二级菜单">
              <template slot-scope="scope">
                <el-link
                  v-if="!scope.row.clickable"
                  :type="scope.row.linkType"
                  @click="threemenu(scope.row)"
                >
                  <span v-html="scope.row.label"></span>
                </el-link>
                <span
                  v-if="scope.row.clickable"
                  :style="'color:'+scope.row.color"
                  v-html="scope.row.label"
                ></span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.clickable" @click="opensee(scope.row)">权限配置</el-button>
                <el-button type="text" @click="editMenu(scope.row)">修改</el-button>
                <el-button type="text" v-if="!scope.row.clickable" @click="addMenu(scope.row)">增加下级</el-button>
                <el-button type="text" @click="menuRole(scope.row)">菜单角色</el-button>
                <el-button type="text" style="color:#f00" @click="opendel(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-table :data="threemenuList" height="600" highlight-current-row>
            <el-table-column align="center" label="三级菜单">
              <template slot-scope="scope">
                <span :style="'color:'+scope.row.color" v-html="scope.row.label"></span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.clickable" @click="opensee(scope.row)">权限配置</el-button>
                <el-button type="text" @click="editMenu(scope.row)">编辑</el-button>
                <el-button type="text" @click="menuRole(scope.row)">菜单角色</el-button>
                <el-button type="text" style="color:#f00" @click="opendel(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <edit ref="edit" />
    <dialogRoleList ref="dialogRoleList" />
    <seemenuauth ref="seemenuauth" />
  </div>
</template>

<script>
import apisystemmenu from "@/api/baseManager/systemmenu";
import { confirm } from "@/utils/index";
import dialogRoleList from "./dialogAuthList";
import edit from "./dialogEditMenu";
import seemenuauth from './dialogSeeMenuAuth';
export default {
  name: "systemmenu",
  components: { edit, dialogRoleList ,seemenuauth},
  data() {
    return {
      onemenuList: [], //一级菜单
      twomenuList: [], //二级菜单
      threemenuList: [], //三级菜单
      listQuery: {
        purviewName: "", //菜单名
        parentId: "first" //父id
      },
      listLoading1: true,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading1 = true;
      this.twomenuList = [];
      this.threemenuList = []; //清空二三级列表
      apisystemmenu.getListPurviewLevel(this.listQuery).then(res => {
        this.onemenuList = res.data.list;
        this.onemenuList.forEach(a => {
          a.level = 1;
          a.nextLevel = 2;
          this.listLoading1 = false;
        });
      });
    },
    addMenu(row) {
      //新增菜单
      if (!row) {
        //新增下级
        this.$refs.edit.openedit("addLevelOneMenu");
      } else {
        //新增一级
        this.$refs.edit.openedit("addOtherMenu", row);
      }
    },
    editMenu(row) {
      //编辑菜单
      this.$refs.edit.openedit("editMenu", row);
    },
    //一级菜单查看二级菜单
    twomenu(row) {
      (this.twomenuList = []),
        (this.threemenuList = []),
        apisystemmenu.getListPurviewLevel({ parentId: row.purviewId }).then(res => {
            this.twomenuList = res.data.list;
            this.twomenuList.forEach(a => {
              a.level = 2;
              a.nextLevel = 3;
            });
          });
    },
    //二级菜单查看三级菜单
    threemenu(row) {
      (this.threemenuList = []),
        apisystemmenu
          .getListPurviewLevel({ parentId: row.purviewId })
          .then(res => {
            this.threemenuList = res.data.list;
            this.threemenuList.forEach(a => {
              a.level = 3;
            });
          });
    },
    //删除
    opendel(row) {
      confirm("是否删除").then(() => {
        apisystemmenu.delPurviewById(row).then(res => {
          this.$message({ type: "success", message: "删除成功！" });
          if (row.level == 1) {
            this.getList();
          } else if (row.level == 2) {
            this.twomenu({ purviewId: row.parentId });
          } else {
            this.threemenu({ purviewId: row.parentId });
          }
        });
      });
    },
    //查看权限
    opensee(row) {
      this.$refs.dialogRoleList.opensee(row);
    },
    //查看一级权限
    /*seeMenu(row) {
      this.$refs.dialogRoleList.seeMenu(row);
    },*/
    menuRole(row){
      this.$refs.seemenuauth.menuRole(row);
    }
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background: #fff;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>